import 'package:fluent_emoji/fluent_emoji.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:vischat/generated/icons/app_icons.dart';
import 'package:fluent_emoji_widget/fluent_emoji_widget.dart';
import 'package:vischat/modules/home/socialize/chat/widgets/message_input/message_input_controller.dart';
import 'package:vischat/modules/home/socialize/chat/widgets/message_options/message_options.dart';

class MessageInputBar extends GetView<MessageInputController> {
  const MessageInputBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Color(0xFFEDEDED),
        border: Border(top: BorderSide(color: Color(0xFFDBDBDB), width: 0.5)),
      ),
      padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 10.w),
      child: GetX<MessageInputController>(
        builder:
            (_) => Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(
                  children: [
                    GestureDetector(
                      onTap: controller.toggleVoiceModel,
                      child: Icon(
                        controller.showVoiceMode
                            ? AppIcons.keyboard
                            : AppIcons.voice_circle,
                        size: 54.r,
                      ),
                    ),
                    Expanded(
                      child: Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.symmetric(
                          horizontal: 20.w,
                          vertical: 10.h,
                        ),
                        margin: EdgeInsets.symmetric(horizontal: 10.w),
                        constraints: BoxConstraints(minHeight: 54.h),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.r),
                        ),
                        child: Stack(
                          children: [
                            Visibility(
                              visible: !controller.showVoiceMode,
                              child: TextField(
                                focusNode: controller.focusNode,
                                controller: controller.textController,
                                maxLines: null,
                                style: TextStyle(fontSize: 28.sp),
                                textInputAction: TextInputAction.send,
                                onSubmitted: controller.sendTextMessage,
                                onTap: () {
                                  controller.hideEmoji();
                                  controller.hideOptionsPanel();
                                },
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  contentPadding: EdgeInsets.zero,
                                  isDense: true,
                                ),
                              ),
                            ),
                            Visibility(
                              visible: controller.showVoiceMode,
                              child: GestureDetector(
                                onTapDown:
                                    (_) => controller.toggleSpeakState(true),
                                onTapUp:
                                    (_) => controller.toggleSpeakState(false),
                                behavior: HitTestBehavior.opaque,
                                child: Center(
                                  child: Text(
                                    controller.speaking
                                        ? 'button.endSpeaking'.tr
                                        : 'button.speak'.tr,
                                    style: TextStyle(
                                      fontSize: 28.sp,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: controller.toggleEmoji,
                      child: Icon(AppIcons.face, size: 54.r),
                    ),
                    SizedBox(width: 20.w),
                    GestureDetector(
                      onTap: controller.togglePanel,
                      child: Icon(AppIcons.add_1, size: 54.r),
                    ),
                  ],
                ),
                AnimatedSize(
                  duration: Duration(milliseconds: 200),
                  child: Visibility(
                    visible: controller.showMorePanel,
                    child: MessageOptions(),
                  ),
                ),
                AnimatedSize(
                  duration: Duration(milliseconds: 200),
                  curve: Curves.easeOutQuad,
                  alignment: Alignment.topCenter,
                  child: Visibility(
                    maintainAnimation: true,
                    maintainState: true,
                    visible: controller.showEmoji,
                    child: Container(
                      height: 400.h,
                      padding: EdgeInsets.only(left: 20.w, right: 20.w, top: 20.h),
                      child: CustomScrollView(
                        slivers: [
                          emojiList(controller.allEmojis),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
      ),
    );
  }

  Widget emojiList(Map<String, FluentEmojiData> maps) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 9,
        mainAxisSpacing: 20.h,
        crossAxisSpacing: 20.w,
      ),
      delegate: SliverChildBuilderDelegate((context, index) {
        final entry = maps.entries.elementAt(index);
        return GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () => controller.selectEmoji(entry.key),
          child: FluentEmojiWidget(entry.value),
        );
      }, childCount: maps.length),
    );
  }
}
